<template>
  <div class="bottom">
    <div class="now">{{ time | timeData }}</div>
    <div class="total">
      <div>一共 &nbsp;{{ getCount }}&nbsp; 件</div>
      <div class="price">合计￥{{ getTotal | numPrice }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      totalPrice: 0,
    };
  },
  props: {
    shopArr: {
      default: [],
    },
    time: {
      default: null,
    },
  },
  methods: {},
  computed: {
    getCount() {
      let arr = this.shopArr;
      let res = 0;
      for (let i = 0; i < arr.length; i++) {
        res += arr[i].count;
      }
      return res;
    },
    getTotal() {
      let arr = this.shopArr;
      let res = 0;
      for (let i = 0; i < arr.length; i++) {
        res += arr[i].count * arr[i].price;
      }
      return res;
    },
  },
  filters: {
    numPrice(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    // getNow(value) {
    //   
    //   if (Object.prototype.toString.call(value) !== "[Object Date]") {
    //     value = new Date(value);
    //   }
    //   var year = value.getFullYear();
    //   var month = value.getMonth() + 1;
    //   month = month >= 10 ? month : "0" + month;
    //   var date = value.getDate();
    //   date = date >= 10 ? date : "0" + date;
    //   var hours = value.getHours();
    //   hours = hours >= 10 ? hours : "0" + hours;
    //   var minutes = value.getMinutes();
    //   minutes = minutes >= 10 ? minutes : "0" + minutes;
    //   var seconds = value.getSeconds();
    //   seconds = seconds >= 10 ? seconds : "0" + seconds;
    //   return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    // },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  border-top: 1px dashed #000;
  padding: 10px 16px;
  font-size: 14px;
  background-color: #fff;
  position: relative;
  .now {
    margin-top: 10px;
  }
  .total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .price {
      color: rgb(12, 52, 186);
      font-weight: bold;
    }
  }
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
  }
}
</style>